<!DOCTYPE html>
<html lang="zh-CN">
<head>
<@resources></@resources>
    <link rel="stylesheet" href="${ctx}/css/swiper.min.css">

    <style>
        /*.swiper-container {
            margin-left: auto;
            margin-right: auto;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        * {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-touch-callout: none;
        }
        .swiper-pagination {
            position: absolute;
            text-align: center;
            -webkit-transition: 300ms;
            -moz-transition: 300ms;
            -o-transition: 300ms;
            transition: 300ms;
            -webkit-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            z-index: 10;
        }
        .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
            bottom: 10px;
            left: 0;
            width: 100%;
        }
        .swiper-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-transition-property: -webkit-transform;
            -moz-transition-property: -moz-transform;
            -o-transition-property: -o-transform;
            -ms-transition-property: -ms-transform;
            transition-property: transform;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
        }

        .swiper-container-android .swiper-slide, .swiper-wrapper {
            -webkit-transform: translate3d(0px, 0, 0);
            -moz-transform: translate3d(0px, 0, 0);
            -o-transform: translate(0px, 0px);
            -ms-transform: translate3d(0px, 0, 0);
            transform: translate3d(0px, 0, 0);
        }


        #swiper_lay .swiper-pagination-bullet {
            width: 7.5px;
            height: 7.5px;
            background: #dcceb9;
            opacity: 1;
        }
        .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
            margin: 0 5px;
        }
        .swiper-pagination-clickable .swiper-pagination-bullet {
            cursor: pointer;
        }
        .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            display: inline-block;
            border-radius: 100%;
            background: #000;
            opacity: 0.2;
        }

        .imgbanner{
            width: 100%;
            height: 100%;
            overflow: hidden;
            text-align: center;
            display: block;
        }*/
        .banner1_title{
            background-size: auto 100%;
        }

        .swiper-container {
            width: 100%;
            height: 100%;

        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="container-box fc_333">

<@header></@header>

    <section>
        <#--<div class="banner1" name="banner1">
            <div class=" fc_white">
                <div><img src="${ctx}/img/banner.png" style="width: 100%;height: 100%;"></div>
                <div class="banner1_text">
                    <p class="f60"><i>智金融平台</i></p>
                    <p class="f18">面向银行、保险等企业，针对业务风险防控、业务精准营销、客户管理、市场运营优化细分4个方向，推出数据验真、商业价值评估、精确营销等标准化产品。</p>
                </div>
            </div>
        </div>-->
        <div class="banner1_title swiper-container swiper-img swiper-container-horizontal" name="banner1">
            <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
                <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                <span class="swiper-pagination-bullet"></span>
                <#--<span class="swiper-pagination-bullet"></span>-->
            </div>
            <div class="swiper-wrapper" style="transform: translate3d(-"+titleWidth+"px, 0px, 0px); transition-duration: 3000ms;">
                <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="1">
                    <img src="${ctx}/img/banner.png" style="width: 100%;height: 100%;top center no-repeat;background-size: 100% 100%;background-position: 100% 100%;background-repeat: no-repeat;">
                    <div class="banner1_text fc_white">
                        <p class="f60"><i>智金融平台</i></p>
                        <p class="f18">面向银行、保险等企业，针对业务风险防控、业务精准营销、客户管理、市场运营优化细分4个方向，推出数据验真、商业价值评估、精确营销等标准化产品。</p>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" onclick="articleDetails('http://www.jszhdc.cn/credit/u_login_v.do')">
                    <img src="${ctx}/img/banner_hxf.png" style="width: 100%;height: 100%;top center no-repeat;background-size: 100% 100%;background-position: 100% 100%;background-repeat: no-repeat;"
                         >
                    <#--<a onclick="" class="banner1 imgbanner" style="background-image: url(${ctx}/img/banner.png)" width: 100%;height:100%;href="#"></a>-->
                    <div class="banner1_text fc_white"  onclick="articleDetails('http://www.jszhdc.cn/credit/u_login_v.do')">
                        <p class="f60"><i>信用分查询</i></p>
                        <p class="f18">从身份特征、社交关系、履约历史、行为特征、消费能力五个维度进行信用评估</p>
                        <p class="f18">立即前往体验</p>
                    </div>
                </div>
                <#--<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3">
                    <img src="${ctx}/img/banner.png" style="width: 100%;height: 100%;top center no-repeat;background-size: 100% 100%;background-position: 100% 100%;background-repeat: no-repeat;">
                    &lt;#&ndash;<a onclick="" class="banner1 imgbanner" style="background-image: url(${ctx}/img/banner.png)" width: 100%;height:100%;href="#"></a>&ndash;&gt;
                    <div class="banner1_text fc_white">
                        <p class="f60"><i>个人信用分查询</i></p>
                        <p class="f18">从身份特征、社交关系、履约历史、行为特征、消费能力五个维度进行信用评估</p>
                    </div>
                </div>-->
            </div>
        </div>
            <#--<div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                </div>
                <!-- Add Pagination &ndash;&gt;
                <div class="swiper-pagination"></div>
                <!-- Add Arrows &ndash;&gt;
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>-->
    </section>

    <section style="padding: 30px 0;">
        <div class="w1200">
            <div class="tit_wrap">
                <div class="tit1"><img src="${ctx}/img/computer.png"><span>应用场景</span></div>
                <hr class="hr1">
            </div>
            <div class="con">
                <ul class="list">
                    <li class="list-li num1">
                        <img src="${ctx}/img/01.png" alt="" class="pic">
                        <p class="mask" style="opacity: 0.6;"></p>
                        <p class="mask1"></p>
                        <div class="word">
                            <img src="${ctx}/img/yycj_fxff.png" alt="" class="logo">
                            <p class="text f16">风险防控</p>
                            <p class="moreText f12 hide">适用用户：适合小额贷以及银行放贷部门，提高优质客户比重，降低信贷风险成本</p>
                            <p class="look f12 hide" id="look1">查看更多</p>
                        </div>
                    </li>
                    <li class="list-li num2">
                        <img src="${ctx}/img/02.png" alt="" class="pic">
                        <p class="mask" style="opacity: 0.6;"></p>
                        <p class="mask1"></p>
                        <div class="word">
                            <img src="${ctx}/img/yycj_jzyx.png" alt="" class="logo">
                            <p class="text f16">精准营销</p>
                            <p class="moreText f12 hide">适用客户：面对银行、保险、证券，根据金融业务营销需要，建立用户画像，运用多渠道实现个性化营销</p>
                            <p class="look f12 hide" id="look2">查看更多</p>
                        </div>
                    </li>
                    <li class="list-li num3">
                        <img src="${ctx}/img/03.png" alt="" class="pic">
                        <p class="mask" style="opacity: 0.6;"></p>
                        <p class="mask1"></p>
                        <div class="word">
                            <img src="${ctx}/img/yycj_khgl.png" alt="" class="logo">
                            <p class="text f16">客户管理</p>
                            <p class="moreText f12 hide">适用客户：面向银行、保险、证券等金融行业，帮助企业修复失联用户，为二次卡用户开放账号注册渠道</p>
                            <p class="look f12 hide" id="look3">查看更多</p>
                        </div>
                    </li>
                    <li class="list-li num4">
                        <img src="${ctx}/img/04.png" alt="" class="pic">
                        <p class="mask" style="opacity: 0.6;"></p>
                        <p class="mask1"></p>
                        <div class="word">
                            <img src="${ctx}/img/yycj_xzfx.png" alt="" class="logo">
                            <p class="text f16">选址分析</p>
                            <p class="moreText f12 hide">适用客户：面向零售、金融等各行业客户，降低选址成本、提高品牌竞争力、最大化投资回报</p>
                            <p class="look f12 hide" id="look4">查看更多</p>
                        </div>
                    </li>
                </ul>
                <div class="tan-con">
                    <img src="${ctx}/img/close.png" class="close1 hide">
                    <div class="scene f16 hide" id="scene1">
                        <div class="scene_l">
                            <h3>风险防控</h3>
                            <div style="height:100px;margin-top: 30px;">
                                <p>适用客户：</p>
                                <p>适合小额贷以及银行放贷部门，提高优质客户比重，降低信贷风险成本。</p>
                            </div>
                            <div style="height:170px">
                                <p>解决方案：</p>
                                <p>1、对客户提供资料的真实性和有效性进行核实。</p>
                                <p> 2、对客户信用情况进行评估，分值越高信用付越高，还款率越高。</p>
                            </div>
                            <div>推荐服务：和信分 数据验真</div>
                        </div>
                        <div class="scene_r">
                            <img src="${ctx}/img/yycj_01.jpg">
                        </div>
                    </div>
                    <div class="scene f16 hide" id="scene2">
                        <div class="scene_l">
                            <h3>精准营销</h3>
                            <div style="height:100px;margin-top: 30px;">
                                <p>适用客户：</p>
                                <p>面对银行、保险、证券，根据金融业务营销需要，建立用户画像，运用多渠道实现个性化营销。</p>
                            </div>
                            <div style="height:170px">
                                <p>解决方案：</p>
                                <p>根据用户行为偏好及画像标签，为客户提供用户的特征偏好查询，实现精准推送功能。</p>
                            </div>
                            <div>推荐服务：精准营销</div>
                        </div>
                        <div class="scene_r">
                            <img src="${ctx}/img/yycj_02.png">
                        </div>
                    </div>
                    <div class="scene f16 hide" id="scene3">
                        <div class="scene_l">
                            <h3>客户管理</h3>
                            <div style="height:100px;margin-top: 30px;">
                                <p>适用客户：</p>
                                <p>面向银行、保险、证券等金融行业，帮助企业修复失联用户，为二次卡用户开放账号注册渠道。</p>
                            </div>
                            <div style="height:170px">
                                <p>解决方案：</p>
                                <p>1、运用移动大数据平台，建立和个人用户的沟通，实现金融企业对失联用户的再次联系。</p>
                                <p>2、通过判断用户注册时间和号码入网时间的先后，解决用户手机号码二次放号后的账号注册的问题。</p>
                            </div>
                            <div>推荐服务： 失联用户分析 二次卡清理</div>
                        </div>
                        <div class="scene_r">
                            <img src="${ctx}/img/yycj_03.jpg">
                        </div>
                    </div>
                    <div class="scene f16 hide" id="scene4">
                        <div class="scene_l">
                            <h3>选址分析</h3>
                            <div style="height:100px;margin-top: 30px;">
                                <p>适用客户：</p>
                                <p>面向零售、金融等各行业客户，降低选址成本、提高品牌竞争力、最大化投资回报。</p>
                            </div>
                            <div style="height:170px">
                                <p>解决方案：</p>
                                <p>以运营商海量数据作为支撑，从五大维度28项细化指标对网点附近人群进行深度剖析，全方位评估网点潜能，为企业选址提供参考依据。</p>
                            </div>
                            <div>推荐服务：网点选址</div>
                        </div>
                        <div class="scene_r">
                            <img src="${ctx}/img/yycj_04.jpg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <section class="bg_f6f6f6" style="padding: 30px 0 30px;">
        <div class="w1200">
            <div class="tit_wrap">
                <div class="tit1" style="background: #f6f6f6;"><img src="${ctx}/img/computer.png"><span>合作伙伴</span>
                </div>
                <hr class="hr1">
            </div>
            <#--<div class="bank_wrap">
                <div><img src="${ctx}/img/bank_china.png"></div>
                <div><img src="${ctx}/img/bank_ht.png"></div>
                <div><img src="${ctx}/img/bank_suzhou.png"></div>
                <div><img src="${ctx}/img/bank_youzheng.png"></div>
                <div><img src="${ctx}/img/bank_china.png"></div>
                <div><img src="${ctx}/img/bank_zheshang.png"></div>
            </div>-->
            <div class="bank_wrap">
                <div><img src="${ctx}/img/bank_china.png"></div>
                <div><img src="${ctx}/img/bank_ht.png"></div>
                <div><img src="${ctx}/img/bank_suzhou.png"></div>
                <div><img src="${ctx}/img/bank_youzheng.png"></div>
                <div><img src="${ctx}/img/bank_china.png"></div>
                <div><img src="${ctx}/img/bank_zheshang.png"></div>
                <div><img src="${ctx}/img/bank_china.png"></div>
                <div><img src="${ctx}/img/bank_ht.png"></div>
                <div><img src="${ctx}/img/bank_suzhou.png"></div>
                <div><img src="${ctx}/img/bank_youzheng.png"></div>
                <div><img src="${ctx}/img/bank_china.png"></div>
                <div><img src="${ctx}/img/bank_zheshang.png"></div>
            </div>
            <div style="text-align:center;" id="more" class="more_bank f16 fc_999">查看更多</div>
        </div>
    </section>

<@footer></@footer>
</div>
<script  src="${ctx}/js/swiper.min.js" type="text/javascript">      </script>
<script>
    // window.onload = function() {
    //     var mySwiper = new Swiper('.swiper-container',{
    //         //添加需要的选项:
    //         mode:'horizontal',
    //         pagination: '.swiper-pagination',    //导航小圆点
    //         paginationClickable: true,        //导航小圆点（可点击）
    //         autoplay : 3000,				//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换
    //         loop : true,      				//可循环
    //         centeredSlides:true,
    //         autoplayDisableOnInteraction:false,
    //         observer:true,
    //         observeParents:true,
    //         slidesPerView:'auto',
    //         loopedSlides:2
    //      });
    //  }

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        // loop : true,
        // observer:true,
        // observeParents:true,
        spaceBetween: 0,
        centeredSlides: true,
        autoplay: 4000,
        autoplayDisableOnInteraction : false
    });

    var titleWidth=$(".banner1").width()

    $(function () {
        $('.banner1_text').addClass('animated bounceInRight');

        /*应用场景切换*/
        $(".con .list li").hover(
                function () {
                    $(this).children(".mask").css({"background-color": "#00a2ca", "opacity": "0.64"});
                    $(this).children(".word").css("top", "-60px");
                    $(this).children(".word").children(".moreText").removeClass("hide");
                    $(this).children(".word").children(".look").removeClass("hide");
                }, function () {
                    $(this).children(".mask").css({"background-color": "#161A1D", "opacity": "0.6"});
                    $(this).children(".word").css("top", "0px");
                    $(this).children(".word").children(".moreText").addClass("hide");
                    $(this).children(".word").children(".look").addClass("hide");
                }
        );

        $(".look").click(function () {
            var id = $(this).attr("id");
            console.log(id);
            $(".list").removeClass("show");
            $(".list").addClass("hide");
            $(".tan-con").removeClass("hide");
            $(".tan-con").addClass("show");
            $(".close1").removeClass("hide");
            $(".close1").addClass("show");
            if (id == "look1") {
                $("#scene1").removeClass("hide");
                $("#scene1").addClass("show");
            }
            if (id == "look2") {
                $("#scene2").removeClass("hide");
                $("#scene2").addClass("show");
            }
            if (id == "look3") {
                $("#scene3").removeClass("hide");
                $("#scene3").addClass("show");
            }
            if (id == "look4") {
                $("#scene4").removeClass("hide");
                $("#scene4").addClass("show");
            }
        });
        $(".close1").click(function () {
            $("#scene1").addClass("hide");
            $("#scene1").removeClass("show");
            $("#scene2").addClass("hide");
            $("#scene2").removeClass("show");
            $("#scene3").addClass("hide");
            $("#scene3").removeClass("show");
            $("#scene4").addClass("hide");
            $("#scene4").removeClass("show");
            $(".close1").removeClass("show");
            $(".close1").addClass("hide");
            $(".list").addClass("show");
        });

        /*服务全景*/
        $(".product").hover(
                function () {
                    $(this).css({"border-top":"5px solid #8db9e8","box-shadow":"-10px 10px 8px rgba(0, 0, 0, 0.2)","top":"-10px","left":"5px"});
                }, function () {
                    $(this).css({"border-top":"none","box-shadow":"none","top":"0px","left":"0px"});
                });
        $(".details").hover(
            function () {
                $(this).css({"background":"#1284d3"});
                $(this).find("a").css("color","#fff")
            },function () {
                $(this).css("background","#fff");
                $(this).find("a").css("color","#1284d3")
                }
        );

        /*解决方案*/
        $(".point").click(function () {
            $(".point").toggleClass("bg_f6f6f6");
        })

        /*更多银行*/
        $(".more_bank").click(function(){
            $(".bank_wrap").css("height","auto");
            $("#more").hide();
        })
    });

    function doOrder() {
        MK.alert("请联系客户经理。", 1);
    }

    /*function doUse(url) {
        if (url != '') {
            window.open(url);
        }else{
            MK.alert("未设置使用地址。", 2);
        }
    }*/

    function doDetails(productId) {
        debugger;
        window.location=ctx + "/product_service/index.html?productId=" + productId;
    }

    function articleDetails(url) {
        debugger;
        window.location=url;
    }


</script>
</body>
</html>